<template>

  <swiper :options="swiperOption"
          class="swiper">
    　　<swiper-slide v-for="(item,index) in bannerList" :key='index'> <a v-if="bannerLink[index].length>0" :href="bannerLink[index]" class="swiper_banner"> <img :src="item"></a><img v-else :src="item"></swiper-slide>
    <!-- 　　<swiper-slide><img src="./1.png"></swiper-slide>
    　<swiper-slide><img src="./1.png"></swiper-slide>
    　<swiper-slide><img src="./1.png"></swiper-slide> -->

    　　<div class="swiper-pagination"
         slot="pagination"></div>

  </swiper>

</template>

<script>
import bus from '../../store/bus.js'
export default {
  name: 'carrousel',

  data () {

    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        }
      },
      bannerList: [],
      bannerLink: [],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许点击小圆点跳转
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false // 手动切换之后继续自动轮播
        },
        loop: true,

      }, HeaderImg: []

    }
  },
  created () {
    this.getBanner();
  },
  mounted () {

  },
  methods: {
    getBanner () {
      bus.$on("banner", (res, res2) => {
        if (res) {
          this.bannerList = res.split(",");
        }
        if (res2) {
          this.bannerLink = res2.split(",");
        }

      });
    },
 
  }
}
</script>

<style>
.swiper img {
  width: 100%;
  height: 134px;
}
</style>